<template>
	<!-- 供应商弹出框 -->
	<v-dialog v-model="supplierCommentModel.dialog" width="1100">
		<v-card>
			<v-toolbar-title>选择供应商信息</v-toolbar-title>
			<v-card-title>
				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="供应商编码" v-model="supplierQuery.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="供应商名称" v-model="supplierQuery.name" dense outlined>
						</v-text-field>
					</v-col>

					<v-col cols="12" sm="2" md="2">
						<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
							刷新</v-btn>
					</v-col>
				</v-row>

			</v-card-title>
			<v-card-text>
				<v-data-table :headers="supplierHeaderList" :items="supplierDataList" small fixed-header
					item-key="cVenCode" dense show-select single-select class="text-no-wrap"
					loading-text="正在加载请稍等......" :loading="supplierLoading" :options.sync="supplierOptions"
					:footer-props="vuetifyDefaultPage" :server-items-length="supplierTotalCount"
					@item-selected="supplierSingleCheckEvent">
				</v-data-table>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn color="primary" class="mr-4" small tile :disabled="this.selectSupplierModel==null" @click="ok">
					确定
				</v-btn>
				<v-btn color="warning" class="mr-4" small tile @click="close">取消</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>

</template>

<script>
	export default {
		name: 'SupplierDataList',
		props: {
			callBack: {
				type: Function, //参数类型：函数
			},
			supplierCommentModel: {
				dialog: false,
				loadSupplierUrl: ``
			},
		},
		data: () => ({

			supplierQuery: {
				code: '',
				name: '',
			},
			supplierHeaderList: [],
			supplierDataList: [],
			supplierTotalCount: 0,
			supplierLoading: true,
			supplierOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			selectSupplierModel: null,
		}),
		watch: {
			supplierOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},
			supplierCommentModel: {
				handler(newVal) {
					this.$emit('update:supplierCommentModel', newVal)
					this.loadPages()
				},
				deep: true
			},
		},
		created() {
			this.getSupplierHeaderList()
		},
		methods: {

			async loadPages() {
				if (!this.supplierCommentModel.dialog) {
					return
				}
				this.supplierLoading = true
				var response = await this.$httpRequest({
					url: this.supplierCommentModel.loadSupplierUrl + `?
							code=${this.supplierQuery.code}&
							name=${this.supplierQuery.name}&
							pageNumber=${this.supplierOptions.page}&
							pageSize=${this.supplierOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.supplierDataList = response.data.result
					this.supplierTotalCount = response.data.pagination.totalRecords
					this.supplierLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshLoadPages() {
				this.supplierQuery.code = ''
				this.supplierQuery.name = ''
				await this.loadPages()
			},
			supplierSingleCheckEvent(select) {
				if (select.value) {
					this.selectSupplierModel = select.item
				} else {
					this.selectSupplierModel = null
				}
			},
			ok() {
				this.$props.callBack(this.selectSupplierModel)
				this.close()
			},
			close() {
				this.selectSupplierModel = null
				this.supplierCommentModel.dialog = false
			},
			getSupplierHeaderList() {
				this.supplierHeaderList = [{
						text: '供应商编码',
						align: 'left',
						value: 'cVenCode',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '供应商名称',
						align: 'left',
						value: 'cVenName',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '供应商简称',
						align: 'center',
						value: 'cVenAbbName',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '供应商分类编码',
						align: 'center',
						value: 'cVCCode',
						filterable: false,
						class: 'fixed'
					},
				]
			},
		}
	}
</script>

<style>
</style>
